
<template>
    <ul class="list">
		<li class="item"
			v-for="item in letters"
			:key = "item"
			:ref = "item"
			@click = "handleLetterClick"
			@touchstart = "handleTouchStart"
			@touchmove = "handleTouchMove"
			@touchend = "handleTouchEnd"
		>
		{{ item }}
		</li>
	</ul>
</template>

<script>
    export default {
		name:"Alphabet",
		props : {
			cities : Object
		},
		data(){
			return {
				touchStatus:false,
				startY : 0,
				timer : null
			}
		},
		methods:{
			handleLetterClick(e){
				console.log(e.target.innerText)
				this.$emit("change",e.target.innerText)//发送
			},
			handleTouchStart(){
				this.touchStatus = true    	
			},
			handleTouchMove(e){
				if (this.touchStatus) {
				//A字符距离顶部的距离
				// const startY = this.$refs["A"][0].offsetTop
				// console.log(startY)
				//所触控区距离最顶部距离e.touches[0].clientY   79为量出来量出来header高43+search高为36
				// const touchY =e.touches[0].clientY - 79
				// console.log(touchY)
				// // index触控位置的下标   20量为字符的高度
				// const index =Math.floor( (touchY - this.startY)/20) 
				// console.log(index)
				// if (index >= 0 && index < this.letters.length ) {
				// 	this.$emit("change", this.letters[index])
				// }

				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(()=>{
					const touchY =e.touches[0].clientY - 79
					console.log(touchY)
					// index触控位置的下标   20量为字符的高度
					const index =Math.floor( (touchY - this.startY)/20) 
					console.log(index)
					if (index >= 0 && index < this.letters.length ) {
						this.$emit("change", this.letters[index])
					}
				},32)	


			}
			},
			handleTouchEnd(){
				this.touchStatus = false    
			}
		},
		computed: {
			letters () {
				const letters = []
				for (let i in this.cities) {
					letters.push(i)
				}
				return letters
			}
		},
		updated () {
			this.startY = this.$refs['A'][0].offsetTop
		}

    }
</script>

<style lang="stylus" scoped>

@import '~styles/varibles.styl'
.list
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute
        top: 1.58rem
        right: 0
        bottom: 0
        width: .44rem
        // background :red
        .item
            line-height: .4rem
            text-align: center
            color: $bgColor

</style>